<template>
	<div class="detail">
		<div class="detail__title">
			<span class="book bold">书籍</span><span class="division">/</span><span class="type">{{type}}</span>
		</div>
		<div class="detail__container"  v-loading="loading">
			<s-person-list :data="item" v-for="(item, index) in diffBooks" :key="index" ></s-person-list>
		</div>
	</div>
</template>

<script>
	//路径映射表，搜索不同的书籍分类得到不同的结果
	const MAP = {
		"kaoyan": "考研",
		"cet": "四六级",
		"textbook": "教材",
		"civil": "公务员",
		"skill": "资格技能书",
		"novel": "小说",
		"computer": "计算机",
		"pdf": "电子书",
		"else": "其他",
		"lixue": "理学院",
		"faxue": "法学院",
		"yingji": "应用技术",
		"waiyuan": "外国语学院",
		"tiyu": "体育学科部",
		"xinxi": "信息工程学院",
		"jingguan": "经济管理学院",
		"guofang": "国防科技学院",
		"huanzi": "环境与资源学院",
		"cailiao": "材料科学与工程",
		"shengke": "生命科学与工程",
		"wenyi": "文学与艺术学院",
		"makesi": "马克思主义学院",
		"tujian": "土木工程与建筑学院",
		"zhizao": "制造科学与工程学院",
		"jike": "计算机与科学技术学院"
	}
	import { fetchDiffBooks } from "../../../api/api.js"
	export default {
		created() {
			this.showDiffrentTypeBooks();
		},
		data() {
			return {
				loading: true,
				diffBooks: null,
				type: ""
			}
		},
		methods: {
			showDiffrentTypeBooks() {
				const query = this.$route.params;
				this.type = MAP[query.type];
				this.loading = true;
				fetchDiffBooks(query).then( res => {
					this.loading = false;
					this.diffBooks = res.data.result;
				} ).catch( err => {
					alert(err);
					console.log(err);
				} );
			}
		},
		watch: {
			"$route": function()  {
				this.showDiffrentTypeBooks();
			}
		}
	}
</script>

<style scoped lang="scss">
	.detail {
		
	}
	.detail__title {
		height: rem(50);
		line-height: rem(50);
		padding: 0 $com-padding-lr-base;
		border-bottom: 1px solid #eee;
		.bold {
			font-weight: bold;
		}
		.book {
			color: $title-color;
		}
		.type {
			font-size: $font-sm;
			color: $gray;
		}
		.division {
			font-size: $font-md;
			font-weight: 700;
			padding: 0 rem(5);
			color: #b4bccc;
		}
	}
	.detail__container {
		min-height: calc(100vh - 100px);
	}
</style>